/* ============================================================================
   Prism — base: reset + element defaults + .container + utilities + the
   container-query LAYOUT PRIMITIVES (section / grid / columns / stack / spacer).
   Loaded after tokens.css. Visual components skin themselves in asset/css/components/*.
   Primitives use `container-type:inline-size` so they adapt to their BLOCK's width,
   not the viewport — that's what lets any component be embedded anywhere unbroken.
   ============================================================================ */

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-base);
  font-size:var(--fs-md);
  line-height:var(--lh-base);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;          /* fixed viewport — only .page-scroll scrolls, header stays put */
  overflow:hidden;
}
/* the scrolling content region (main + footer); the header sits above it, fixed.
   flex column + growing main = sticky footer: on short pages main fills the gap so
   the footer rests at the viewport bottom; on tall pages main keeps its content
   height (shrink:0) and the footer never collapses (flex:none) — the region scrolls. */
.page-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.page-scroll>main{flex:1 0 auto;padding-top:var(--space-xl);padding-bottom:var(--space-xl)}
.page-scroll>.c-footer{flex:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);line-height:var(--lh-tight);font-weight:700}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg)}
a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--c-accent)}
img,svg,video,canvas{max-width:100%;height:auto;display:block}   /* responsive media — never fixed-size */
ul,ol{list-style:none;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
hr{border:0;border-top:1px solid var(--c-border)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:2px}
::selection{background:var(--c-accent);color:var(--c-accent-ink)}
[hidden]{display:none!important}
[x-cloak]{display:none!important}   /* Alpine: hide until initialized */

/* ── container ──────────────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-md)}

/* ── utilities ──────────────────────────────────────────────────────────── */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--c-text-muted)}
.clamp-1,.clamp-2,.clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.clamp-1{-webkit-line-clamp:1}
.clamp-2{-webkit-line-clamp:2}
.clamp-3{-webkit-line-clamp:3}
.icon{width:1em;height:1em;fill:currentColor;flex:none;display:inline-block;vertical-align:-.125em}
.aspect{position:relative;overflow:hidden;background:var(--c-surface-2);border-radius:var(--radius-sm)}
.aspect>img,.aspect>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* skeleton shimmer for loading states (lazySection / cards) */
.skel{position:relative;overflow:hidden;background:var(--c-surface-2);border-radius:var(--radius-sm)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:skel 1.3s infinite}
.bstem .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
@keyframes skel{100%{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================================
   LAYOUT PRIMITIVES — container-query based (adapt to the block, not the screen)
   ============================================================================ */

/* ── section ── titled content region; variants plain | card | bleed ── */
.c-section{container-type:inline-size;display:block;margin-block:var(--section-gap)}
.c-section:first-child{margin-top:0}
.c-section__head{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}
.c-section__title{font-size:var(--fs-lg);font-weight:700;display:inline-flex;align-items:center;gap:.5em}
.c-section__more{margin-left:auto;font-size:var(--fs-sm);color:var(--c-text-muted);display:inline-flex;align-items:center;gap:.25em;white-space:nowrap}
.c-section__more:hover{color:var(--c-accent)}
.c-section--card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:var(--space-lg)}
.c-section--bleed{margin-inline:calc(50% - 50vw);padding-inline:max(var(--space-md),calc(50vw - var(--container-max) / 2))}
@container (max-width:360px){.c-section__more span{display:none}}

/* ── grid ── responsive auto-fill; --fixed uses --cols ── */
.c-grid{container-type:inline-size;display:grid;gap:var(--col-gap);
  grid-template-columns:repeat(auto-fill,minmax(min(var(--card-min),100%),1fr))}
.c-grid--fixed{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}

/* ── columns ── proportional fr columns (--cols-template set inline, e.g. "8fr 4fr").
   OUTER .c-columns is ONLY the query container; the INNER .c-columns__grid is the grid
   that the @container rules size — an element can't respond to its OWN container query,
   so the grid must be a descendant of the container to stack. Container queries can't
   read a custom prop, so the compiler maps stack_at to a bucket class:
   ≤560 → --stack-sm · default/md → 780 · ≤980 → --stack-lg. ── */
.c-columns{container-type:inline-size}
.c-columns__grid{display:grid;gap:var(--space-lg);align-items:start;grid-template-columns:var(--cols-template,1fr 1fr)}
@container (max-width:780px){.c-columns__grid:not(.c-columns--stack-sm):not(.c-columns--stack-lg){grid-template-columns:1fr}}
@container (max-width:560px){.c-columns__grid.c-columns--stack-sm{grid-template-columns:1fr}}
@container (max-width:980px){.c-columns__grid.c-columns--stack-lg{grid-template-columns:1fr}}
/* --reverse-stack: when stacked, flip column order (last column on top, e.g. sidebar/rank above main); desktop side-by-side order untouched. flex column-reverse keeps full-width stacked columns. */
@container (max-width:780px){.c-columns__grid.c-columns--reverse-stack:not(.c-columns--stack-sm):not(.c-columns--stack-lg){display:flex;flex-direction:column-reverse;align-items:stretch}}
@container (max-width:560px){.c-columns__grid.c-columns--stack-sm.c-columns--reverse-stack{display:flex;flex-direction:column-reverse;align-items:stretch}}
@container (max-width:980px){.c-columns__grid.c-columns--stack-lg.c-columns--reverse-stack{display:flex;flex-direction:column-reverse;align-items:stretch}}

/* ── stack & spacer ── */
.c-stack{display:flex;flex-direction:column;gap:var(--space-md)}
.c-spacer{height:var(--space-lg)}